import React from 'react'
import { ScrollView, Text, KeyboardAvoidingView, TextInput, View } from 'react-native'
import { Metrics, Colors, Fonts } from '../../Themes'
import { API, WINDOW } from '../../Services'
import styles from '../Styles/CommonContainerStyles'
import Button from 'apsl-react-native-button'
import ListViewSeparator from '../../Components/ListViewSeparator'
class FankuiScreen extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            content: '',
            content1: '',
            content2: '',
            content3: ''
        }
    }

    fetchData() {
        if (!this.state.content) {
            return WINDOW.showToast('请输入完整信息！')
        }
        WINDOW.showToastSuccess('提交成功！')
    }

    render() {
        return (
            <View style={styles.container}>
                <KeyboardAvoidingView behavior={Metrics.isIOS ? 'padding' : null} style={{ flex: 1 }} >
                    <ScrollView keyboardShouldPersistTaps='handled'>
                        <TextInput
                            style={{ margin: 20, height: 100, backgroundColor: 'white', fontSize: 18, color: 'gray' }}
                            multiline={true}
                            placeholder='请输入您的建议'
                            onChangeText={(content) => {
                                this.setState({ content })
                            }} />
                        <ListViewSeparator />
                        <View style={{ marginLeft: 10, marginRight: 10, marginTop: 2, height: 40, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center' }}>
                            <Text style={{ marginLeft: 15, fontSize: 16, width: 120, color: 'gray' }}>
                                请留下手机号码
            </Text>
                            <TextInput
                                style={{ flex: 1 }}
                                keyboardType='numeric'
                                underlineColorAndroid='transparent'
                                onChangeText={(content1) => this.setState({ content1 })} />
                        </View>
                        <ListViewSeparator />
                        <View style={{ marginLeft: 10, marginRight: 10, marginTop: 1, height: 40, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center' }}>
                            <Text style={{ marginLeft: 15, fontSize: 16, width: 120, color: 'gray' }}>
                                请留下您的称呼
            </Text>
                            <TextInput
                                style={{ flex: 1 }}
                                underlineColorAndroid='transparent'
                                onChangeText={(content2) => this.setState({ content2 })} />
                        </View>
                        <ListViewSeparator />
                        <View style={{ marginLeft: 10, marginRight: 10, marginTop: 1, height: 40, backgroundColor: 'white', flexDirection: 'row', alignItems: 'center' }}>
                            <Text style={{ marginLeft: 15, fontSize: 16, width: 120, color: 'gray' }}>
                                请留下您的地址
            </Text>
                            <TextInput
                                style={{ flex: 1 }}
                                underlineColorAndroid='transparent'
                                onChangeText={(content3) => this.setState({ content3 })} />
                        </View>
                        <ListViewSeparator />
                        <View style={{ marginTop: 50, marginBottom: 20, alignSelf: 'center' }}>
                            <Button
                                onPress={() => this.fetchData()}
                                style={{ width: Metrics.screenWidth - 15 * 2, height: 50, alignSelf: 'center', backgroundColor: Colors.mainColor, marginTop: 15, borderWidth: 0, borderRadius: 25 }}
                                textStyle={{ color: 'white', fontSize: 18, fontWeight: 'bold' }}>提交</Button>
                        </View>

                    </ScrollView>
                </KeyboardAvoidingView>
            </View>
        )
    }
}

export default FankuiScreen
